<template>
    <view class="score-edit-container">
		<view class="form-group">
		  <view class="label">关联客户</view>
		  <view class="customer" @click="toCustomerDetail">{{applyInfo.customer.customer_name}}</view>
		</view>
		<view class="form-group">
		  <view class="label">关联订单</view>
		  <view class="customer" @click="toOrderDetail">{{applyInfo.goodssales_code}}</view>
		</view>
      <view class="form-group">
        <view class="label">申请说明</view>
        <textarea v-model="formData.remark" class="form-control" placeholder="请输入积分申请说明" />
      </view>
      
      <view class="form-group">
        <view class="label">申请明细</view>
        <view class="score-items">
          <view v-for="(item, index) in formData.apply_data" :key="index" class="score-item">
            <input v-model="item.mobile" placeholder="手机号" class="mobile-input" />
            <input v-model.number="item.score" placeholder="赠送积分" class="score-input" type="number" />
            <view class="btn-delete" @click="removeScoreItem(index)">
              <uni-icons type="trash" size="20"></uni-icons>
            </view>
          </view>
        </view>
        <view class="add-btn" @click="addScoreItem">+ 添加</view>
      </view>
      
      <view class="button" @click="submitEdit">保存修改</view>
    </view>
  </template>
  
  <script>
  import { editScoreApply,getScoreApplyDetail } from '@/api/api.js';
  
  export default {
    data() {
      return {
        applyId: '',
		applyInfo:{},
        formData: {
          remark: '',
          apply_data: [{
            mobile: '',
            score: 0
          }]
        }
      };
    },
    onLoad(options) {
      if (options.applyId) {
        this.applyId = options.applyId;
        this.loadApplyData();
      }
    },
    methods: {
      // 加载申请数据
      loadApplyData() {
        getScoreApplyDetail({id: this.applyId}).then(res => {
          this.formData = {
			  remark:res.data.remark || '',
			  apply_data:res.data.apply_data || [],
		  };
          this.applyInfo = res.data;
        })
      },
      // 添加积分项
      addScoreItem() {
        this.formData.apply_data.push({
          mobile: '',
          score: 0
        });
      },
      // 移除积分项
      removeScoreItem(index) {
        if (this.formData.apply_data.length > 1) {
          this.formData.apply_data.splice(index, 1);
        }
      },
      // 提交修改
      submitEdit() {
        // 验证数据
        if (!this.validateApplyData()) return;
        
        // 构造请求参数
        const params = {
          id: this.applyId,
          ...this.formData
        };
        
        // 调用更新接口
        editScoreApply(params).then(res => {
          uni.showToast({ title: '更新成功' });
          uni.navigateBack();
        }).catch(err => {
          uni.showToast({ title: '更新失败', icon: 'none' });
        });
      },
      // 数据验证
      validateApplyData() {
        const mobileReg = /^1[3-9]\d{9}$/;
        
        for (let i = 0; i < this.formData.apply_data.length; i++) {
          const item = this.formData.apply_data[i];
          
          if (!item.mobile) {
            uni.showToast({ title: '请输入手机号', icon: 'none' });
            return false;
          }
          
          if (!mobileReg.test(item.mobile)) {
            uni.showToast({ title: '手机号格式不正确', icon: 'none' });
            return false;
          }
          
          if (!item.score || item.score <= 0) {
            uni.showToast({ title: '请输入正确的积分', icon: 'none' });
            return false;
          }
        }
        
        return true;
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
	.score-edit-container{
		padding: 20rpx;
	}
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		font-size: 40rpx;
		color: #999;
	}

	.form-group {
		margin-bottom: 30rpx;
		.label {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 15rpx;
		}
	}
	.form-control {
		width: 95%;
		// height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e6e6e6;
		border-radius: 8rpx;
		font-size: 26rpx;
	}

	.score-items {
		border: 1rpx solid #e6e6e6;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.score-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 20rpx;
		position: relative;
	}

	.mobile-input, .score-input, .remark-input {
		flex: 1;
		height: 60rpx;
		padding: 0 20rpx;
		margin-right: 20rpx;
		border: 1rpx solid #e6e6e6;
		border-radius: 6rpx;
		font-size: 24rpx;
		margin-bottom: 15rpx;
	}

	.btn-delete {
		flex: 0 0 10%;
		max-width: 10%;
		font-size: 24rpx;
		text-align: center;
	}

	.add-btn {
		color: #0287ff;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
	}

	.existing-applications {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #eee;
	}
	.application-list-container {
		height: 500rpx; /* 可视区域高度 */
		overflow: hidden;
	}

	.application-list {
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.application-item {
		background: #f7f8fa;
		border-radius: 6rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.item-row {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		font-size: 24rpx;
		color: #666;
	}

	.label {
		width: 140rpx;
		color: #999;
	}

	.value {
		flex: 1;
		color: #333;
	}

	.detail-list {
		flex: 1;
	}

	.detail-item {
		margin-bottom: 10rpx;
	}

	.status-success {
		color: #00c97f;
	}

	.status-pending {
		color: #ec7f51;
	}
  </style>